/* eslint-disable jsx-a11y/alt-text */
import React from 'react';
import Navbar from '../component/Navbar';
import './style/myInvite.css';
const tabList = ["返佣明细", "邀请明细"]
class Help extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tabIndex: 0,
            listIndex: -1,
            type: true,
            list: [1, 2, 3, 4]
        }
    }
    goBack = () => {
        this.props.history.goBack();
    }
    //tab切换
    jumpTab(index) {
        this.setState({
            tabIndex: index
        })
    }
    //点击list展开
    jumpListItem(index) {
        const { listIndex } = this.state
        if (listIndex === index) index = -1
        this.setState({
            listIndex: index
        })
    }
    render() {
        const { list, listIndex, tabIndex } = this.state
        return (
            <div className='myInvite'>
                <Navbar onClick={this.goBack} title='我的邀请' ></Navbar>
                <div className="topMain">
                    <div className="money">￥10000.00</div>
                    <div className="topText">佣金收益</div>
                </div>
                <div className="tab">
                    {
                        tabList.map((item, index) => {
                            return <div onClick={() => { this.jumpTab(index) }} key={index} className={index === tabIndex ? 'tabItemTrue' : 'tabItemFalse'}>{item}</div>
                        })
                    }
                </div>
                <div className='scroll'>
                    {
                        list.map((item, index) => {
                            return tabIndex === 0 ? <div className="listItem" key={index} >
                                <div className="content">
                                    <div className="titlelLeft">一级返佣</div>
                                    <div className="titleName">张三</div>
                                    <div>操作利息：+1.00</div>
                                </div>
                                <div className="content" style={{ marginTop: '1rem', fontSize: '1.2rem' }}>
                                    <div>我的返佣：<span style={{ color: "#F98743" }}>+1.00</span></div>
                                    <div>2020-3-04 12:23:43</div>
                                </div>
                            </div> : <div className="listItem" key={index} >
                                    <div className="content">
                                        <div className="titlelLeft">我的邀请</div>
                                    </div>
                                    <div className="content" style={{ marginTop: '1rem', fontSize: '1.2rem' }}>
                                        <div>张三</div>
                                        <div>178****2323</div>
                                        <div>2020-3-04 12:23:43</div>
                                    </div>
                                </div>
                        })
                    }

                </div>
            </div>
        )
    }
}

export default Help;